import React, { Component } from 'react'
import { Tree, Tabs, message, Input, Button } from 'antd'
// import { request } from '../helper'
// import { PATH } from '../const/const'
import '../utils/index.less'
import store from 'store'
import { RightOutlined, LeftOutlined } from '@ant-design/icons'
import { get, post, put, Delete } from '@/services/https'
const TreeNode = Tree.TreeNode
class TransferZd extends Component {
  static defaultProps = {
    allUser: true, // ALL所有用户
  }
  state = {
    treeData: [],
    tab: '1',
    eventKey: '',
    key: [],
    rightKey: [],
    searchVal: '',
    expandedKeys: [],
    autoExpandParent: true,
    index: 1,
  }
  componentDidMount() {
    this.getData(1)
  }
  componentWillUpdate(newProps, newState) {
    if (
      newState.treeData.length > 0 &&
      newProps.selectData.length !== 0 &&
      newState.index === 1
    ) {
      let selectData = newProps.selectData
      let arr = [...selectData].map((item) => item.eventKey)
      let treeData = newState.treeData
      function loop(array) {
        array.forEach((item) => {
          item.disabled = arr.includes(item.key)
          if (item.child.length > 0) {
            loop(item.child)
          }
        })
      }
      loop(treeData)
      this.setState({ index: 2, treeData: [...treeData] })
    }
  }

  getData(key) {
    if (key == 1) {
      get(
        'action?command=queryrankinfo&accountInfo=' + store.get('account_info')
      ).then((res) => {
        this.formData(res)
        this.formData1(res)
        this.setState({ treeData: res })
      })
    } else {
      get(
        'action?command=queryrankinfo&policyid=' +
          key +
          '&accountInfo=' +
          store.get('account_info')
      ).then((res) => {
        this.formData(res)
        this.setState({ treeData: res })
      })
    }
    let { treeDa } = this.props
  }
  formData(data) {
    function loop(array) {
      array.forEach((item) => {
        item.name = item.name
        item.key = item.id
        item.type = item.type
        item.child = []
      })
    }
    data.forEach((item) => {
      item.child = item.children
      item.name = item.name
      item.key = item.id
      item.type = item.type
      loop(item.children)
    })
  }
  formData1(data) {
    let arrr = []
    function loop1(array) {
      array.forEach((item) => {
        arrr.push({
          id: item.id,
          name: item.name,
          type: item.type,
        })
      })
    }
    data.forEach((item) => {
      arrr.push({
        id: item.id,
        name: item.name,
        type: item.type,
      })
      loop1(item.children)
    })
    this.setState({ treeDataarr: arrr })
  }
  onSelect = (key, e) => {
    if (e.selected) {
      this.setState({
        key,
        eventKey: e.node.eventKey,
      })
    } else {
      this.setState({
        key: [],
        eventKey: '',
      })
    }
  }
  onRightSelect = (key, e) => {
    if (e.selected) {
      this.setState({
        rightKey: key,
      })
    } else {
      this.setState({
        rightKey: [],
      })
    }
  }
  handleLeftClick = () => {
    // this.setOneTreeNode(this.state.select, 'disabled', this.state.selectInfo)
    let { eventKey, key, tab, treeData, treeDataarr } = this.state
    let { selectData, getSelectData } = this.props
    if (eventKey) {
      this.getNewTree(treeData, eventKey, true)
      if (tab === '1') {
        treeDataarr.map((item, index) => {
          if (item.id == eventKey) {
            selectData = [
              ...selectData,
              { name: item.name, eventKey, type: item.type },
            ]
            getSelectData(selectData)
          }
        })
      } else {
      }
      this.setState({ treeData: [...treeData] })
    } else {
      message.error('用户目录不可选取')
    }

    this.setState({ key: [], eventKey: '' })
  }
  handleRightClick = () => {
    let { rightKey, tab, treeData } = this.state
    let { selectData, getSelectData } = this.props
    if (tab === '1') {
      let arr = ['0-0', '0-1', '0-2', '0-3', '0-4', '0-5']
      if (arr.indexOf(rightKey[0]) > -1) {
        if (rightKey[0] == '0-0') {
          let yunxing = [
            {
              name: '运行状态',
              eventKey: '0-0',
            },
            {
              name: '状态概览',
              eventKey: '0-0-0',
            },
            {
              name: '终端管理',
              eventKey: '0-0-1',
            },
            {
              name: '事件日志',
              eventKey: '0-0-2',
            },
            {
              name: '管理日志',
              eventKey: '0-0-3',
            },
            {
              name: '隔离邮件',
              eventKey: '0-0-4',
            },
            {
              name: '实时更新',
              eventKey: '0-0-5',
            },
          ]
          for (var i = 0; i < yunxing.length; i++) {
            selectData = selectData.filter(
              (item) => item.eventKey !== yunxing[i].eventKey
            )
            this.getNewTree(treeData, yunxing[i].eventKey, false)
            getSelectData(selectData)
          }
        } else if (rightKey[0] == '0-1') {
          let yunxing1 = [
            {
              name: '全局设置',
              eventKey: '0-1',
            },
            {
              name: '系统设置',
              eventKey: '0-1-0',
            },
            {
              name: '系统警报',
              eventKey: '0-1-1',
            },
            {
              name: '管理员',
              eventKey: '0-1-2',
            },
            {
              name: '目录服务',
              eventKey: '0-1-3',
            },
            {
              name: '从服务器',
              eventKey: '0-1-4',
            },
            {
              name: '系统维护',
              eventKey: '0-1-5',
            },
            {
              name: '文件类型组',
              eventKey: '0-1-6',
            },
            {
              name: '证书管理',
              eventKey: '0-1-7',
            },
            {
              name: '审批流程',
              eventKey: '0-1-8',
            },
            {
              name: '反病毒',
              eventKey: '0-1-9',
            },
          ]
          for (var i = 0; i < yunxing1.length; i++) {
            selectData = selectData.filter(
              (item) => item.eventKey !== yunxing1[i].eventKey
            )
            this.getNewTree(treeData, yunxing1[i].eventKey, false)
            getSelectData(selectData)
          }
        } else if (rightKey[0] == '0-2') {
          let yunxing2 = [
            {
              name: '数据资产',
              eventKey: '0-2',
            },
            {
              name: '通用配置',
              eventKey: '0-2-0',
            },
            {
              name: '保护策略',
              eventKey: '0-2-1',
            },
            {
              name: '治理策略',
              eventKey: '0-2-2',
            },
            {
              name: '治理任务',
              eventKey: '0-2-3',
            },
            {
              name: '过滤器',
              eventKey: '0-2-4',
            },
            {
              name: '识别引擎',
              eventKey: '0-2-5',
            },
            {
              name: '保护动作',
              eventKey: '0-2-6',
            },
            {
              name: '目的通道',
              eventKey: '0-2-7',
            },
          ]
          for (var i = 0; i < yunxing2.length; i++) {
            selectData = selectData.filter(
              (item) => item.eventKey !== yunxing2[i].eventKey
            )
            this.getNewTree(treeData, yunxing2[i].eventKey, false)
            getSelectData(selectData)
          }
        } else if (rightKey[0] == '0-3') {
          let yunxing3 = [
            {
              name: '计算机资产',
              eventKey: '0-3',
            },
            {
              name: '通用配置',
              eventKey: '0-3-0',
            },
            {
              name: '安全策略',
              eventKey: '0-3-1',
            },
            {
              name: '移动存储',
              eventKey: '0-3-2',
            },
            {
              name: '应用程序',
              eventKey: '0-3-3',
            },
            {
              name: '应用程序组',
              eventKey: '0-3-4',
            },
            {
              name: '文件服务器',
              eventKey: '0-3-5',
            },
            {
              name: '安全区域',
              eventKey: '0-3-6',
            },
          ]
          for (var i = 0; i < yunxing3.length; i++) {
            selectData = selectData.filter(
              (item) => item.eventKey !== yunxing3[i].eventKey
            )
            this.getNewTree(treeData, yunxing3[i].eventKey, false)
            getSelectData(selectData)
          }
        } else if (rightKey[0] == '0-4') {
          let yunxing4 = [
            {
              name: '邮件资产',
              eventKey: '0-4',
            },
            {
              name: '通用配置',
              eventKey: '0-4-0',
            },
            {
              name: '邮件路由',
              eventKey: '0-4-1',
            },
            {
              name: '安全策略',
              eventKey: '0-4-2',
            },
            {
              name: '黑白名单',
              eventKey: '0-4-3',
            },
            {
              name: '邮件用户',
              eventKey: '0-4-4',
            },
            {
              name: '连接控制',
              eventKey: '0-4-5',
            },
            {
              name: '邮件控制',
              eventKey: '0-4-6',
            },
            {
              name: '高级过滤',
              eventKey: '0-4-7',
            },
            {
              name: '连接加密',
              eventKey: '0-4-8',
            },
            {
              name: '流量整形',
              eventKey: '0-4-9',
            },
            {
              name: '个邮管理',
              eventKey: '0-4-10',
            },
          ]
          for (var i = 0; i < yunxing4.length; i++) {
            selectData = selectData.filter(
              (item) => item.eventKey !== yunxing4[i].eventKey
            )
            this.getNewTree(treeData, yunxing4[i].eventKey, false)
            getSelectData(selectData)
          }
        } else if (rightKey[0] == '0-5') {
          let yunxing5 = [
            {
              name: '上网行为',
              eventKey: '0-5',
            },
            {
              name: '通用配置',
              eventKey: '0-5-0',
            },
            {
              name: '安全策略',
              eventKey: '0-5-1',
            },
            {
              name: '过滤器',
              eventKey: '0-5-2',
            },
            {
              name: '网页类别',
              eventKey: '0-5-3',
            },
            {
              name: '黑白名单',
              eventKey: '0-5-4',
            },
            {
              name: '上网代理',
              eventKey: '0-5-5',
            },
            {
              name: 'ICAP集成',
              eventKey: '0-5-6',
            },
            {
              name: '协议设置',
              eventKey: '0-5-7',
            },
            {
              name: 'SSL加密',
              eventKey: '0-5-8',
            },
            {
              name: '访问控制',
              eventKey: '0-5-9',
            },
            {
              name: '连接管理',
              eventKey: '0-5-10',
            },
          ]
          for (var i = 0; i < yunxing5.length; i++) {
            selectData = selectData.filter(
              (item) => item.eventKey !== yunxing5[i].eventKey
            )
            this.getNewTree(treeData, yunxing5[i].eventKey, false)
            getSelectData(selectData)
          }
        }
      } else {
        this.getNewTree(treeData, rightKey[0], false)
        selectData = selectData.filter((item) => item.eventKey !== rightKey[0])
        getSelectData(selectData)
      }
    } else {
    }
    this.setState({ treeData: [...treeData], rightKey: [] })
  }
  getNewTree(arr, key, boolen) {
    arr.forEach((item) => {
      if (item.key === key) {
        item.disabled = boolen
      } else if (item.child.length > 0) {
        this.getNewTree(item.child, key, boolen)
      }
    })
  }

  handleSearch = (value) => {
    if (value === '') {
      this.getSearchData()
      this.setState({ searchVal: '' })
    } else {
      let arrId = []
      function loop(father, val) {
        let arr = []
        let child = []
        let bol = false //防止重复添加
        for (let item of father) {
          bol = false
          if (item.name.indexOf(value) > -1) {
            arr.push(item)
            arrId.push(item.key)
            bol = true
          }
          if (item.child.length !== 0) {
            child = loop(item.child, value)
            item.child = child
            if (!bol && child.length != 0) {
              arr.push(item)
              arrId.push(item.key)
            }
          }
        }
        return arr
      }
      this.getSearchData((json) => {
        let result = loop(json, value)
        let expandedKeys = arrId
        this.setState({
          treeData: result,
          searchVal: value,
          expandedKeys,
          autoExpandParent: true,
        })
      })
    }
  }
  onExpand = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    })
  }
  render() {
    let { expandedKeys, autoExpandParent } = this.state
    let { allUser } = this.props
    const loop = (data) =>
      data.map((item) => {
        let searchVal = this.state.searchVal
        const index = item.name.indexOf(searchVal)
        const beforeStr = item.name.substr(0, index)
        const afterStr = item.name.substr(index + searchVal.length)
        const title =
          index > -1 ? (
            <span>
              {beforeStr}
              <span style={{ color: '#f50' }}>{searchVal}</span>
              {afterStr}
            </span>
          ) : (
            <span>{item.name}</span>
          )
        if (item.child.length > 0) {
          return (
            <TreeNode
              title={title}
              eventKey={item.key}
              key={item.key}
              disabled={item.disabled}
            >
              {loop(item.child)}
            </TreeNode>
          )
        }
        return (
          <TreeNode
            title={title}
            eventKey={item.key}
            key={item.key}
            disabled={item.disabled}
          />
        )
      })
    const treeNodes = loop(this.state.treeData)
    return (
      <div className="transfer-style-warp">
        <div className="ant-transfer">
          <div className="transfer-list">
            <div className="ant-transfer-list-header">
              <label className="ant-checkbox-wrapper">
                <span className="ant-checkbox">
                  <span className="ant-checkbox-inner" style={{ border: 0 }}>
                    {this.props.title[0]}
                  </span>
                </span>
              </label>
            </div>
            <div className="ant-transfer-list-body">
              {/* <Search className='w100' onSearch={this.handleSearch} /> */}
              <Tree
                onSelect={this.onSelect}
                selectedKeys={this.state.key}
                onExpand={this.onExpand}
                expandedKeys={expandedKeys}
                autoExpandParent={autoExpandParent}
              >
                {treeNodes}
              </Tree>
            </div>
          </div>
          <div className="ant-transfer-operation">
            <Button
              onClick={this.handleLeftClick}
              disabled={this.state.key.length === 0}
              type="button"
              className="ant-btn ant-btn-primary ant-btn-sm"
              icon={<RightOutlined />}
            ></Button>
            <Button
              onClick={this.handleRightClick}
              disabled={this.state.rightKey.length === 0}
              type="button"
              className="ant-btn ant-btn-primary ant-btn-sm"
              icon={<LeftOutlined />}
            ></Button>
          </div>
          <div className="tab-transfer-list">
            <div className="transfer-list second-list" style={{ height: 300 }}>
              <div className="ant-transfer-list-header">
                <label className="ant-checkbox-wrapper">
                  <span className="ant-checkbox">
                    <span className="ant-checkbox-inner" style={{ border: 0 }}>
                      {this.props.title[1]}
                    </span>
                  </span>
                </label>
              </div>
              <div className="ant-transfer-list-body">
                <Tree
                  onSelect={this.onRightSelect}
                  selectedKeys={this.state.rightKey}
                >
                  {this.props.selectData.map((item) => {
                    let name = item.name
                    return <TreeNode title={name} key={item.eventKey} />
                  })}
                </Tree>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default TransferZd
